<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-08 16:11:14
 * @LastEditTime: 2023-11-16 21:18:45
 * @LastEditors: sueRimn
-->


<template>
  <view class="phone-info">
    <view class="tip"><text class="tip-label">小贴士</text>选择越精确、估价越准确、放款越迅速。</view>
    <view class="phone d-flex align-items-center justify-content-between">
		<view class="more">至高+¥500</view>
		<view class="info d-flex flex-column flex-fill">
		   <view class="name">{{ productDetail.productName }}</view>
		</view>
    </view>
  </view>
</template>


<script>
export default {
  props: {
    productDetail: { type: Object, default: {} }
  },
  computed: {
    dorp() {
      return parseInt(this.productDetail.maxPrice * 0.0132)
    }
  }
}
</script>

<style lang="scss" scoped>
.phone-info {
  background: #fff;
  margin: 0 0 0rpx 0;

  .tip {
    font-size: var(--hui-font-size-24);
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9D7300;
	background: #FFF4D7;
	.tip-label {
		width: 123rpx;
		height: 42rpx;
		display: inline-block;
		text-align: center;
		line-height: 42rpx;
		background: linear-gradient( 270deg, #FFB56B 0%, #FFEDDB 100%);
		border-radius: 0rpx 0rpx 24rpx 0rpx;
		margin-right: 10rpx;
    color: #743A00;
	}
  }
}

.phone {
  padding: 24rpx 32rpx;
  width: 100%;

  .image {
    background: #F7F7F7;
    border-radius: 16rpx;
    width: 132rpx;
    height: 132rpx;
  }
  
  .more {
	  width: 136rpx;
	  height: 32rpx;
	  line-height: 32rpx;
	  text-align: center;
	  background: linear-gradient( 270deg, #FF4646 0%, #FFAC46 100%);
	  border-radius: 6rpx;
	  font-family: PingFangSC, PingFang SC;
	  font-weight: 400;
	  font-size: 22rpx;
	  color: #FFFFFF;
	  margin-right: 12rpx;
  }

  .info {
    .name {
      font-size: var(--hui-font-size-26);
      color: var(--hui-color-title);
      line-height: 1;
      font-weight: bold;
      margin-top: 5rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 500rpx;
    }

    .price {
      line-height: 1;
      padding: 24rpx 0 0 0;

      .text {
        font-size: var(--hui-font-size-26);
        margin: 0 0 5rpx 0rpx;
        color: var(--hui-color-subtitle);
      }

      .value {
        font-size: 40rpx;
        color: #FF2323;
        font-size: var(--hui-font-size-lg);
      }
    }

    .dorp {
      font-size: var(--hui-font-size-26);
      color: var(--hui-color-subtitle);
      margin: 10rpx 0 0 0;
    }
  }

}
</style> 